<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">个人中心</block>
		</cu-custom>

		<view class="user-info">
			<view class="avatar">
				<image
					src="https://s1.aigei.com/prevfiles/4f4678659f264ae3bac378086f490c96.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:EF0xgrWpIyY1kVaPQuEEz76nByU="
					mode="aspectFill"></image>
			</view>
			<view class="name">{{ cname }}</view>

			<view class="info-card">
				<view class="info-item">
					<view class="info-label">昵称</view>
					<view class="info-value">{{ username }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">手机号</view>
					<view class="info-value">{{ phone || '未绑定' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">积分</view>
					<view class="info-value balance">{{ balance }}</view>
				</view>
			</view>
		</view>

		<view class="menu-list">
			<view class="menu-item" @click="navigateToTransaction">
				<view class="icon">
					<image
						src="https://s1.chu0.com/src/img/png/5e/5ec53cfcc6ea42ae8768074edf250e12.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:wPM_ak8m0CEfP0Gf1ykVMqsxlq4="
						mode="aspectFill"></image>
				</view>
				<view class="text">交易记录</view>
			</view>
			
			<view class="menu-item" @click="navigateToSendout">
				<view class="icon">
					<image
						src="https://s1.aigei.com/prevfiles/8216a96aa7ba43708b01c4bbbaaf93ac.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:J21u9EnihoCAqSQKqad_iRYGGVU="
						mode="aspectFill"></image>
				</view>
				<view class="text">我的发布</view>
			</view>

			<view class="menu-item" @click="navigateToEditProfile">
				<view class="icon">
					<image
						src="https://s1.aigei.com/src/img/png/7f/7f0e5e1020b34c4c8c84792ef6447741.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:9bsLg9b4L5E1DJULGdlXdN2RIfk="
						mode="aspectFill"></image>
				</view>
				<view class="text">修改个人信息</view>
			</view>

			<view class="menu-item" @click="navigateTopwchange">
				<view class="icon">
					<image
						src="https://s1.aigei.com/src/img/png/c1/c1397c87cde441dca3252b026ac0c39d.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:Qlp85TDNMsRZEBxxm2xh-xVZsg4="
						mode="aspectFill"></image>
				</view>
				<view class="text">修改密码</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import storage from '@/common/storage.js';
	export default {
		data() {
			return {
				cname: '',
				phone: '',
				balance: 0,
				username:''
			}
		},
		methods: {
			navigateToTransaction() {
				uni.navigateTo({
					url: '/pages/transaction/transaction'
				});
			},
			navigateToSendout() {
				uni.navigateTo({
					url: '/pages/sendout/sendout'
				});
			},
			navigateToEditProfile() {
				uni.navigateTo({
					url: '/pages/editprofile/editprofile'
				});
			},
			navigateTopwchange() {
				uni.navigateTo({
					url: '/pages/changepw/changepw'
				});
			},
			getUserInfo() {
				const mid = uni.getStorageSync('mid');
				let paramsList = {
				
				}
				let optsList = {
					url: `api/user/`+ mid,
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("接口", res.data.data)
						_this.balance = res.data.data.points
						_this.phone = res.data.data.phone
						_this.username = res.data.data.username
					}
				});
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		mounted() {
			const cname = uni.getStorageSync('name');
			this.cname = cname;
			console.log("name值", cname);
		}
	}
</script>

<style>
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		background-color: #fff;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.name {
		font-size: 36rpx;
		margin-top: 20rpx;
		color: #333;
		font-weight: bold;
	}

	/* 新增的个人信息卡片样式 */
	.info-card {
		width: 90%;
		margin-top: 30rpx;
		padding: 25rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
	}

	.info-item:not(:last-child) {
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.balance {
		color: #ff6b6b;
		font-weight: bold;
	}

	.menu-list {
		margin-top: 40rpx;
		background-color: #fff;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.icon image {
		width: 100%;
		height: 100%;
	}

	.text {
		font-size: 32rpx;
		color: #333;
	}
</style>